<template>
  <el-row :gutter="20">
    <el-col :span="18">
    <!-- 左侧信息 start -->
    <div class="left-box">
      <h3 class="title">
        <el-icon><User/></el-icon>
        个人信息设置
      </h3>

      <!-- 基本信息 start  -->
      <div class="set">
        <h4>基础设置</h4>
        <el-form ref="basicFormRef" :rules="basicRules" status-icon :model="basic">
          <el-row :gutter="20">
            <!-- 用户账号  -->
            <el-col :span="8">
              <el-form-item prop="userName" label="用户账号" style="width: 100%">
                <el-input v-model="basic.userName" disabled />
              </el-form-item>
            </el-col>

            <!-- 用户性别 -->
            <el-col :span="8">
              <el-form-item prop="sex" label="性别" style="width: 100%">
                <el-radio v-model="basic.sex" label="男"></el-radio>
                <el-radio v-model="basic.sex" label="女"></el-radio>
              </el-form-item>
            </el-col>


            <el-col :span="5">
              <el-form-item label="头像" style="margin: auto;" prop="avatar">
                <el-upload class="avatar-uploader" :action="uploadUrl" :headers="headerObj"
                name="fileResource" :show-file-list="false" :on-success="handleAvatarSuccess">
                  <img v-if="basic.avatar" :src="url+'uploadFile/' + basic.avatar" alt="" style="width: 50px;border-radius: 50px;">
                  <img v-else src="@/assets/login/布偶猫.png" alt="" style="width: 50px;border-radius: 50px;"/>
                  <span style="margin-left: 10px; font-size: 10px; text-decoration: underline; line-height: 20px;">点击更换</span>
                </el-upload>
              </el-form-item>
            </el-col>

            <el-col :span="3">
              <el-form-item>
                <el-button plain color="#2fa7b9" style="margin-left: 50px;" v-loading="loading" @click="onBasicSubmit(basicFormRef)">提交</el-button>
              </el-form-item>
            </el-col>


          </el-row>
        </el-form>
      </div>
      <!-- 基本信息 end  -->

      <el-divider border-style="dashed"/>

      <!-- 绑定邮箱 start -->
      <BindEmail/>
      <!-- 绑定邮箱 end -->

      <el-divider border-style="dashed"/>

      <!-- 修改密码 start -->
      <UpdatePwd/>
      <!-- 修改密码 end -->

    </div>
    </el-col>
    <!-- 左侧信息 end -->
    <!-- 右侧信息 start -->
    <UserInfo/>
    <!-- 右侧信息 end -->
  </el-row>
</template>

<script setup lang="ts">
import {ref, reactive, toRefs, onMounted} from "vue";
import {useUserStore} from "../../../../store/modules/user.ts";
import { ElMessage,FormRules,FormInstance } from "element-plus";
import {updateInfoApi} from "../../../../api/system/user/user.ts";
import BindEmail from "./BindEmail.vue";
import UpdatePwd from "./UpdatePwd.vue";
import UserInfo from "./UserInfo.vue";

// 基础信息表单实例对象
const basicFormRef = ref<FormInstance>();
// 按钮状态
const loading = ref(false);
// 定义表单校验规则
const basicRules = reactive<FormRules>({
  avatar: [{ required: true,message: '请上传头像',trigger: 'blur' }],
  sex: [{ required: true,message: '请选择性别',trigger: 'blur' }]
});


const state = reactive({
  // 基本信息
  basic: {
    userName: '',
    sex: '',
    avatar: ''
  }
})

// 服务器路径
const url = import.meta.env.VITE_APP_BASE_API;
// 图片上传地址
const uploadUrl = url + 'upload/file';
// 上传图片需要带上token
const userStore = useUserStore();
const headerObj = {
  AccessToken: userStore.token
}

// 上传图片成功执行的函数
const handleAvatarSuccess = (res: any) => {
  if (res.code === 200) {
    state.basic.avatar = res.filename;
  } else {
    ElMessage.error(res.msg)
  }
}

// 提交基础信息函数
const onBasicSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      loading.value = true;
      const { data } = await updateInfoApi({...state.basic})
      if (data.code === 200) {
        // 重置登录用户信息
        userStore.setUserInfo({
          sex: state.basic.sex,
          avatar: state.basic.avatar
        });
        ElMessage.success("基础信息修改成功")
      } else {
        ElMessage.error("基础信息修改失败")
      }
    }else {
      ElMessage.error("提交表单失败，您还有未填写的项")
    }
    loading.value = false;
  })
}

onMounted(() => {
  // 获取登录用户信息
  state.basic.userName = userStore.userInfo.userName;
  state.basic.sex = userStore.userInfo.sex;
  state.basic.avatar = userStore.userInfo.avatar;
})

const { basic } = toRefs(state);

</script>

<style scoped>
.left-box {
  width: 100%;
  height: auto;
  background: white;
  padding: 20px;
  box-sizing: border-box;
}
.left-box .title {
  color: #e99d53;
  margin-bottom: 10px;
  padding: 20px;
  display: inline-block;
  justify-content: center;
  align-items: center;
}
.left-box .set{
  text-align: left;
  padding: 0 20px;
  margin-bottom: 10px;
  color: #8f8f8f;
  line-height: 35px;
}
.left-box .set h4 {
  line-height: 45px;
  color: #8f8f8f;
}

</style>